<template>
    <div v-if="isinit"  class="header-container">
    <span class="welcome-text">欢迎: {{name}}({{username}}) </span>
    <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        style="width: auto; min-width: fit-content;"
    >
      <el-sub-menu index="1">
        <template #title>用户中心</template>
        <el-menu-item index="1-1" @click="RePassword">修改密码</el-menu-item>
        <el-menu-item index="1-2" @click="ReUserInfo">修改用户信息</el-menu-item>
        <el-menu-item index="1-3" @click="LoginOut">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <EditPassWord ref="re_password"/>
    <EditUserInfo ref="re_user_info"/>
  </div>

</template>

<script  setup>
import {onMounted, ref, watchEffect} from 'vue'
import setting from "@/setting.js";
import {ElMessage} from "element-plus";
import EditPassWord from "@/components/Main/UserManger/EditPassWord.vue";
import EditUserInfo from "@/components/Main/UserManger/EditUserInfo.vue";
import router from "@/router/index.js";
import {jsonApi} from "@/global.js";
const name = ref("")
const username = ref("")
const activeIndex = ref('1')
onMounted(() => {
  check_userinfo();
  getAllUser();
});
const handleSelect = async (key, keyPath) => {
  console.log(key, keyPath)
}
const re_password = ref(null)
const re_user_info = ref(null)
const RePassword = async () => {
  if (re_password.value && typeof re_password.value.open === 'function') {
    re_password.value.open();
  } else {
    console.error('addAuthorComponent.open is not a function');
  }
}
const ReUserInfo = async () => {
  if (re_user_info.value && typeof re_user_info.value.open === 'function') {
    re_user_info.value.open();
  } else {
    console.error('addAuthorComponent.open is not a function');
  }
}
const LoginOut = async () => {
  /*
  * /user/logout/*/
  try {
    const jsonbody= {
      "refresh": localStorage.getItem('refresh_token')
    }
    const response = await jsonApi('/user/logout/',JSON.stringify(jsonbody));
    if (response.ok) {
      localStorage.removeItem('access_token');
      localStorage.removeItem('refresh_token');
      localStorage.removeItem('user_groups');
      localStorage.removeItem('userinfo');
      localStorage.removeItem('reportinfo');
      ElMessage({
        message: '退出成功',
        type: 'success'
      })
      await router.push('/login');
    }
  }catch (e) {
    ElMessage({
      message: '退出失败:' + e,
      type: 'error'
    })
  }
}


const isinit=ref(false);
const getUserInfo=async ()=>{
/*
* /user/info/ post
* fetch
* */
  try {
    const response = await jsonApi('/user/info/');
    const data = await response.json();
    if (response.ok) {
      localStorage.setItem('userinfo', JSON.stringify(data));
    } else {
      ElMessage({
        message: '获取用户信息失败:' + data.detail,
        type: 'error'
      })
    }
  } catch (e) {
    ElMessage({
      message: '获取用户信息失败:' + e,
      type: 'error'
    })
  }


}
const check_userinfo=async () => {
  if (localStorage.getItem('userinfo')) {
    isinit.value = true;
    const userinfo = JSON.parse(localStorage.getItem('userinfo'));
    name.value = userinfo.name;
    username.value = userinfo.username;
  }else{
    await getUserInfo();
    await check_userinfo();
  }

};

const getAllUser=async ()=>{
  try {
    const json_body= {
      "name":""
    }
    const response = await jsonApi('/user/allinfo/',JSON.stringify(json_body))
    const data = await response.json();
    localStorage.setItem('alluser', JSON.stringify(data));
  }catch (e) {
    ElMessage({
      message: '未能获取系统内用户信息 请退出后重新登录:' + e,
      type: 'error'
    })
  }

}
</script>

<style>
/* 设置welcome-user*/
.header-container {
  display: flex;
  align-items: center; /* 使垂直居中 */
  justify-content: space-between; /* 在两端对齐元素，自动分配剩余空间 */
}

.welcome-text {
  margin-left: 10px; /* 保持原有的左边距 */
}
</style>
